<template>
  <view class="index">
    <view v-if="dataFlag" class="content">
      <view class="one">
        <view class="txt">
          <text>{{ currentType | typeFilter }}</text>
        </view>
        <view>
          <u-button size="mini" type="primary" @click="showCardModal" :ripple="true" ripple-bg-color="#a0cfff">答题卡</u-button>
        </view>
      </view>
      <!-- 试题面板 -->
      <!-- swiper下的每个swiper-item是一个滑动切换区域 -->
      <swiper :current="subjectIndex" @change="swiperChange" style="flex: 1">
        <swiper-item v-for="(subject, index) in subjectList" :key="subject.id">
          <!-- 根据subjectIndex题目索引显示题目 -->
          <u-line color="blue" />
          <scroll-view :scroll-y="true" style="height: 71vh;" v-show="index === subjectIndex">
            <view>
              <view class="two">
                <view><text>（</text>{{ subject.point }}<text>分）</text> {{ subjectIndex+1 }}. {{ subject.title }}</view>
              </view>
              <u-line color="blue" />
              <!-- 根据数据中的类型显示不同组件 -->
              <view>
                <view v-if="subject.typeValue === 1 || subject.typeValue === 2">
                  <u-radio-group  v-model="subject.userAnswer" @change="radioGroupChange">
                    <view class="two" v-for="(option1, index1) in subject.optionList" :key="index1">
                      <u-radio :disabled="true" label-size="35rpx" icon-size="40rpx" :name="option1.value">
                        {{ option1.value }}.{{ option1.content }}
                      </u-radio>
                    </view>
                  </u-radio-group>
                </view>

                <view v-else-if="subject.typeValue === 3">
                  <u-checkbox-group  @change="checkboxGroupChange">
                    <view class="two" v-for="(option2, index2) in subject.optionList" :key="index2">
                      <u-checkbox
                          label-size="35rpx"
                          icon-size="40rpx"
                          v-model="option2.check"
                          :name="option2.value"
                          :disabled="true"
                      >{{ option2.value }}.{{ option2.content }}</u-checkbox>
                    </view>
                  </u-checkbox-group>
                </view>

                <view v-else-if="subject.typeValue === 4">
                  <view>
                    <view class="da">答：</view>
                    <u-input :disabled="true" type="text" placeholder="请输入你的答案" :height="60" :auto-height="true" :border="true" v-model="subject.userAnswer" />
                  </view>
                </view>

                <view v-else-if="subject.typeValue === 5">
                  <view><view class="da">答：</view></view>
                  <view>
                    <u-input :disabled="true" type="textarea" placeholder="请输入你的答案" :height="100" :auto-height="true" :border="true" v-model="subject.userAnswer" />
                  </view>
                </view>
              </view>
              <!-- 控制是否显示正确答案 -->
              <view class="three">
                <view class="four">
                  <view class="u-type-primary">
                    <text>正确答案：</text>
                    <text>{{ subject.answer }}</text>
                  </view>
                </view>
                <view class="four">
                  <view class="u-type-success">
                    <text>解析：</text>
                    <text>{{ subject.parse }}</text>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-line color="blue" />
    <!-- 底部栏 -->
    <view class="bg-white five">
      <view class="six" @click="moveSubject(-1)">
        <u-icon color="#2979ff" size="40" name="arrow-left-double"></u-icon>
        <view>上一题</view>
      </view>
      <view class="six" @click="moveSubject(1)">
        <u-icon size="40" color="#2979ff" name="arrow-right-double"></u-icon>
        <view>下一题</view>
      </view>
    </view>
    <!-- 答题卡窗口 -->
    <view class="cu-modal" :class="modalCard ? 'show' : ''" @tap="hideCardModal">
      <view class="cu-dialog" @tap.stop>
        <!-- 设置可滚动视图区域 -->
        <scroll-view class="page padding" :scroll-y="true" style="height: 80vh">
          <view class="text-blue">答题卡</view>
          <view class="grid">
            <view class="u-margin-20" v-for="(subject, index) in subjectList" :key="index">
              <u-button size="mini" shape="circle" type="primary" @click="appointedSubject(index)">
                {{ index + 1 }}
              </u-button>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>


export default {
  data() {
    return {
      //当前题型
      currentType: 0,
      //跳转索引,也表示当前第几题，从0开始
      subjectIndex: 0,
      //判断题、单项题，自动移下一题
      autoRadioNext: true,
      // 数据组成：题目，类型，选项，答案，是否回答，是否收藏，答案解析
      subjectList: null,
      dataFlag: false,
      //显示答题卡
      modalCard: false,
      page: 1,
      total: 0,
      id: '',
      userId: ''
    }
  },
  onLoad(e) {

    this.id = e.id;
    if (e.userId){
      this.userId = e.userId
    }else{
      uni.$emit("setVuexUserInfo", {user: null, isLoginPage: false});
      this.userId = this.$store.getters.id;
    }
    this.getSubject();
  },
  methods: {
    getSubject() {
      this.dataFlag = false;
      this.$u.api.getAnswerExercise(this.id,this.userId, {pageNum: this.page}).then(res => {
        if (res.data != null && res.data.length !== 0){
          this.showSubject(res.data);
          this.total = res.total;
        }else {
          this.$u.toast("查询为空！")
        }
      })
    },
    // 获取下一页的数据
    nextPageSubject(){
      if ((this.page * 20) < this.total){
        this.page = ++this.page
        this.$u.api.getExercise(this.id, {pageNum: this.page}).then(res => {
          this.showSubject(res.data);
          this.total = res.total;
        })
      }
    },
    showSubject(data) {
      // 动态添加用户显示答案字段，默认全部隐藏
      for (let i = 0; i < data.length; i++) {
        let list = JSON.parse(data[i].optionList);
        if (data[i].typeValue === 3) {
          let answer = data[i].answer;
          for (let item of list) {
            if (answer.indexOf(item.value) > -1){
              item.check = true;
            }
          }
        }
        data[i].optionList = list;
      }
      if (this.page > 1){
        this.subjectList = this.subjectList.concat(data);
      }else {
        // 初始化第一题
        this.currentType = data[0].typeValue;
        this.subjectList = data;
        this.dataFlag = true;
      }
    },
    showCardModal() {
      this.modalCard = true;
    },
    hideCardModal() {
      this.modalCard = false;
    },
    //滑动事件
    swiperChange(e) {
      let index = e.target.current;
      // 改变索引（题目显示），当前题型（标题显示）
      if (index !== undefined) {
        this.subjectIndex = index;
        if (this.subjectIndex + 3 >= this.page * 20){
          this.nextPageSubject();
        }
        this.currentType = this.subjectList[index].typeValue;
      }
    },
    //单选选中，自动跳转下一题
    radioGroupChange(e) {
      this.subjectList[this.subjectIndex].userAnswer = e;
      // 单选，判断自动跳下一题
      if (this.autoRadioNext && this.subjectIndex < this.subjectList.length - 1) {
        this.subjectIndex += 1;
      }
    },
    //复选选中
    checkboxGroupChange(e) {
      let items = this.subjectList[this.subjectIndex].optionList;
      this.subjectList[this.subjectIndex].userAnswer = "";
      for (let i = 0, lenI = items.length; i < lenI; ++i) {
        for (let j = 0, lenJ = e.length; j < lenJ; ++j) {
          if (items[i].value === e[j]) {
            this.subjectList[this.subjectIndex].userAnswer += items[i].value;
            break
          }
        }
      }
    },
    //上一题、下一题
    moveSubject(e) {
      if (e === -1 && this.subjectIndex !== 0) {
        this.subjectIndex -= 1;
      }
      if (e === 1 && this.subjectIndex < this.subjectList.length - 1) {
        if (this.subjectIndex + 3 >= this.page * 20){
          this.nextPageSubject();
        }
        this.subjectIndex += 1;
      }
    },
    //题卡指定
    appointedSubject(e) {
      this.modalCard = false;
      this.subjectIndex = e;
      if (this.subjectIndex + 3 >= this.page * 20){
        this.nextPageSubject();
      }
    }
  },
  filters: {
    typeFilter(index){
      let typeStr = ['判断题', '单选题', '多选题', '填空题', '问答题']
      return typeStr[index - 1];
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 78.5vh;
  .content {
    display: flex;
    height: 100%;
    flex-direction: column;
    margin-bottom: 200rpx;
  }

}
.one {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 20rpx;
  .txt{
    font-size: 32rpx;
    font-weight: bold;
  }
}
.two{
  width: 100%;
  min-height: 80rpx;
  height: auto;
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 0 20rpx 10rpx;
  margin-left: 20rpx;
  word-wrap:break-word
}

.three{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  .four{
    font-size: 35rpx;
    margin-top: 20rpx;
    margin-left: 20rpx;
  }
}
.da {
  margin: 10rpx;
}
.bg-white {
  width: 100%;
  height: 200rpx;
  bottom: 0;
  position: fixed;
  background-color: #e9e6e6;
  color: #2979ff;
}
.text-blue{
  color: #0081ff;
}
.five{
  display: flex;
  justify-content: space-around;
  font-size: 30rpx;
  .six {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.padding {
  padding: 30rpx;
}
.cuIcon-title:before {
  content: "\e82f";
}
.grid {
  display: flex;
  flex-wrap: wrap;
}
/* ==================
         模态窗口
 ==================== */

.cu-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 2000rpx;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
}

.cu-modal::before {
  content: "\200B";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.cu-modal.show {
  opacity: 1;
  transition-duration: 0.3s;
  -ms-transform: scale(1);
  transform: scale(1);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

.cu-dialog {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 680rpx;
  max-width: 100%;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  overflow: hidden;
}

.cu-modal.bottom-modal::before {
  vertical-align: bottom;
}

.cu-modal.bottom-modal .cu-dialog {
  width: 100%;
  border-radius: 0;
}

.cu-modal.bottom-modal {
  margin-bottom: -1000rpx;
}

.cu-modal.bottom-modal.show {
  margin-bottom: 0;
}

.cu-modal.drawer-modal {
  transform: scale(1);
  display: flex;
}

.cu-modal.drawer-modal .cu-dialog {
  height: 100%;
  min-width: 200rpx;
  border-radius: 0;
  margin: initial;
  transition-duration: 0.3s;
}

.cu-modal.drawer-modal.justify-start .cu-dialog {
  transform: translateX(-100%);
}

.cu-modal.drawer-modal.justify-end .cu-dialog {
  transform: translateX(100%);
}

.cu-modal.drawer-modal.show .cu-dialog {
  transform: translateX(0%);
}
.cu-modal .cu-dialog>.cu-bar:first-child .action{
  min-width: 100rpx;
  margin-right: 0;
  min-height: 100rpx;
}





</style>
